<template>
<span>
    <div class="avatar-uploaders">
        <img v-if="selectedImg&&selectedImg!='http://192.168.0.108:8086/one9-web/file?idStr='" :src="selectedImg" class="avatars" > 
        <i  v-else class="el-icon-plus avatar-uploader-icon" ></i>
        <input type="file" class="preFile " name="staffFile" multiple="multiple" @change="changeFn($event)"  >
    </div>
</span>
</template>



<script>
    export default {
        data() {
            return {
                clearShow:true,
                imageUrl: '',
                imageId:'',
            }
        },
        methods: {
            changeFn(e){
                this.deviceArray = [];
                let deviceFile = e.target.files;
                let formData = new FormData();
                for(let i=0;i<deviceFile.length;i++){
                formData.append('file', deviceFile[i]);
                }
                this.clearShow = false;
                let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
                }
                this.$axios.post('/one9-web/file/upload',
                formData, config
                ).then((res)=>{
                // console.log(res);
                this.clearShow = false;
                this.imageUrl=res.data.url;
                this.imageId=res.data.id;
                console.log({index:this.indexImg,url:this.imageUrl,id:this.imageId})
                 this.$emit('add-parent-img',{index:this.indexImg,url:this.imageUrl,id:this.imageId});
                },()=>{
                    this.clearShow = true;
                });
          },
        },
        watch:{
               'this.clearShow':function(val){
                    // console.log(val)
               },
               'this.selectedImg'(val){
                   console.log(val)
               }
        },
        props: {
           indexImg: {},
           selectedImg:{}
         },
         mounted(){
             console.log(this.selectedImg,'childs')
         }
    }

</script>
<style scoped>
  .avatar-uploaders  {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    width: 120px;
    height: 120px;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}
  .avatar-uploader:hover {
    border-color: #409EFF;
  }
  .avatars{
    width: 120px;
    height: 120px;
    display: block;
  }
  .avatar-uploaders  .preFile{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
  }
</style>

